<template>
	<div class="network_monitoring" v-loading="loading">
		<el-row :gutter="16" type="flex">
			<el-col :span="6">
				<chart-card title="CPU">
					<ul class="service_info">
						<li>
							<span class="label">核心数</span>
							<span class="value">{{ cpuData.cpuNum || 0 }}核</span>
						</li>
						<li>
							<span class="label">用户使用率</span>
							<span class="value">{{ cpuData.used || 0 }}%</span>
						</li>
						<li>
							<span class="label">系统使用率</span>
							<span class="value">{{ cpuData.sys || 0 }}%</span>
						</li>
						<li>
							<span class="label">当前空闲率</span>
							<span class="value">{{ cpuData.free || 0 }}%</span>
						</li>
					</ul>
				</chart-card>
			</el-col>
			<el-col :span="6">
				<chart-card title="内存">
					<ul class="service_info">
						<li>
							<span class="label">总内存</span>
							<span class="value">{{ memData.total || 0 }}G</span>
						</li>
						<li>
							<span class="label">已用内存</span>
							<span class="value">{{ memData.used || 0 }}G</span>
						</li>
						<li>
							<span class="label">剩余内存</span>
							<span class="value">{{ memData.free || 0 }}G</span>
						</li>
						<li>
							<span class="label">使用率</span>
							<span class="value">{{ memData.usage || 0 }}%</span>
						</li>
					</ul>
				</chart-card>
			</el-col>
			<el-col :span="6">
				<chart-card title="JVM">
					<ul class="service_info">
						<li>
							<span class="label">总内存</span>
							<span class="value">{{ jvmData.total || 0 }}M</span>
						</li>
						<li>
							<span class="label">已用内存</span>
							<span class="value">{{ jvmData.used || 0 }}M</span>
						</li>
						<li>
							<span class="label">剩余内存</span>
							<span class="value">{{ jvmData.free || 0 }}M</span>
						</li>
						<li>
							<span class="label">使用率</span>
							<span class="value">{{ jvmData.usage || 0 }}%</span>
						</li>
					</ul>
				</chart-card>
			</el-col>
			<el-col :span="6">
				<chart-card title="服务器信息">
					<ul class="service_info">
						<li>
							<span class="label">服务器名称</span>
							<span class="value">{{ sysData.computerName }}</span>
						</li>
						<li>
							<span class="label">服务器IP</span>
							<span class="value">{{ sysData.computerIp }}</span>
						</li>
						<li>
							<span class="label">操作系统</span>
							<span class="value">{{ sysData.osName }}</span>
						</li>
						<li>
							<span class="label">系统架构</span>
							<span class="value">{{ sysData.osArch }}</span>
						</li>
					</ul>
				</chart-card>
			</el-col>
		</el-row>
		<div class="java_information">
			<chart-card title="JAVA虚拟机信息">
				<el-row class="service_info">
					<el-col :span="10">
						<span class="label">Java名称</span>
						<span class="value">{{ jvmData.name }}</span>
					</el-col>
					<el-col :span="7">
						<span class="label">Java版本</span>
						<span class="value">{{ jvmData.version }}</span>
					</el-col>
					<el-col :span="7">
						<span class="label">启动时间</span>
						<span class="value">{{ jvmData.startTime }}</span>
					</el-col>
					<el-col :span="10">
						<span class="label">安装路径</span>
						<span class="value">{{ jvmData.home }}</span>
					</el-col>
					<el-col :span="7">
						<span class="label">运行时长</span>
						<span class="value">{{ jvmData.runTime }}</span>
					</el-col>
					<el-col :span="7">
						<span class="label">项目路径</span>
						<span class="value">{{ sysData.userDir }}</span>
					</el-col>
				</el-row>
			</chart-card>
		</div>
		<div class="disk_information">
			<chart-card title="服务器信息">
				<el-table :data="sysFiles" height="100%" style="width: 100%">
					<el-table-column prop="dirName" label="盘符路径" min-width="80"></el-table-column>
					<el-table-column prop="sysTypeName" label="文件系统" min-width="80"></el-table-column>
					<el-table-column prop="typeName" label="盘符类型" min-width="180"></el-table-column>
					<el-table-column prop="total" label="总大小" min-width="100"></el-table-column>
					<el-table-column prop="free" label="可用大小" min-width="100"></el-table-column>
					<el-table-column prop="used" label="已用大小" min-width="100"></el-table-column>
					<el-table-column prop="usage" label="已用百分比" min-width="100"></el-table-column>
				</el-table>
			</chart-card>
		</div>
	</div>
</template>

<script>
import chartCard from './chartCard';
import { getNetMonitorData } from '@/api/openApi';
export default {
	components: { chartCard },
	data() {
		return {
			loading: true,
			serverData: {}
		};
	},
	computed: {
		cpuData() {
			return this.serverData.cpu || {};
		},
		memData() {
			return this.serverData.mem || {};
		},
		jvmData() {
			return this.serverData.jvm || {};
		},
		sysData() {
			return this.serverData.sys || {};
		},
		sysFiles() {
			return this.serverData.sysFiles || [];
		}
	},
	mounted() {
		this.loading = true;
		this.getServer();
	},
	methods: {
		async getServer() {
			let result = await getNetMonitorData().then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.serverData = this.$detailData(result.data);
				console.log(this.serverData);
			}
		},
		setCpuFree(val) {
			var free = Number(val);
			free = free > 90 ? '90.' : free;
			return free;
		}
	}
};
</script>

<style lang="scss" scoped>
.network_monitoring {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background-color: #f5f7fa;
	.el-row {
		margin-bottom: 16px;
	}
}

.java_information {
	margin-bottom: 16px;
	.el-row {
		margin-bottom: 0;
	}
}

.disk_information {
	flex: 1;
	overflow: hidden;
	.el-table {
	}
}

.service_info {
	padding: 10px 16px;
	li,
	.el-col {
		display: flex;
		align-items: center;
		font-size: 16px;
		padding: 8px 0;
	}
	span.label {
		width: 30%;
		min-width: 100px;
		flex-shrink: 0;
		color: #606266;
	}
	span.value {
		flex: 1;
		overflow: hidden;
		color: #303133;
	}
}
</style>
